<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>员工列表</title>
    <script type="text/javascript" src="${request.contextPath}/statics/bootstrap/jquery-1.12.4.min.js"></script>
    <link href="${request.contextPath}/statics/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="${request.contextPath}/statics/bootstrap/js/bootstrap.min.js"></script>
    <link href="${request.contextPath}/statics/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <script src="${request.contextPath}/statics/ztree/js/jquery.ztree.all-3.5.min.js"></script>
</head>
<body>
<!-- 搭建显示页面 -->
<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <!-- 按钮 -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">查询</button>
            <input type="button" class="btn btn-primary" id="user_add_modal_btn" value="add">
        </div>
    </div>
    <!-- 显示表格数据 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <th>用户编码</th>
                    <th>用户名称</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
                    <#list pageInfo.list as user>
                    <tr>
                        <th>${user.userCode! }</th>
                        <th>${user.userName! }</th>
                        <th>${user.gender! }</th>
                        <th>${user.age!}</th>
                        <th>${user.phone!}</th>
                        <th>
                            <button class="btn btn-primary btn-sm user-edit" uid="${user.id}">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                编辑
                            </button>
                            <button class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                删除
                            </button>
                        </th>
                    </tr>
                </#list>
            </table>
        </div>
    </div>

    <!-- 显示分页信息 -->
    <div class="row">
        <!--分页文字信息  -->
        <div class="col-md-6">当前 ${pageInfo.pageNum }页,总${pageInfo.pages }
            页,总 ${pageInfo.total! } 条记录</div>
        <!-- 分页条信息 -->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li><a href="${request.contextPath}/jsp/list?pageIndex=1">首页</a></li>
                    <#if (pageInfo.hasPreviousPage)>
                        <li><a href="${request.contextPath}/jsp/list?pageIndex=${pageInfo.pageNum-1}"
                               aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
                        </a></li>
                    </#if>
                    <#list pageInfo.navigatepageNums as page_Num>
                        <#if (page_Num == pageInfo.pageNum)>
                            <li class="active"><a href="#">${page_Num }</a></li>
                        </#if>
                        <#if page_Num != pageInfo.pageNum>
                            <li><a href="${request.contextPath}/jsp/list?pageIndex=${page_Num }">${page_Num }</a></li>
                        </#if>
                    </#list>
                    <#if (pageInfo.hasNextPage)>
                        <li><a href="${request.contextPath}/jsp/list?pageIndex=${pageInfo.pageNum+1 }"
                               aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                        </a></li>
                    </#if>
                    <li><a href="${request.contextPath}/jsp/list?pageIndex=${pageInfo.pages }">末页</a></li>
                </ul>
            </nav>
        </div>
    </div>

</div>

<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="edit_form" action="http://www.baidu.com" target="_blank">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <ul id="treeDemo" class="ztree" style="width:260px; overflow:auto;"></ul>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="dId">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="add_form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@atguigu.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <input type="file" name="pic">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="dId">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

$(function () {
    //编辑
    $(".user-edit").click(function () {
        var uid = $(this).attr("uid") ;
        $("#empName_update_static").html(uid) ;
        $("#empUpdateModal").modal({
            backdrop: "static"
        });
        alert(checkNode());
    });
    //添加
    $("#user_add_modal_btn").click(function(){
       $("#empAddModal").modal({
           backdrop: "static"
       });
    });

    //添加触发提交
    $("#emp_save_btn").click(function () {
        var datas = new FormData($("#add_form").get(0)) ;
        $.ajax({
            url:'${request.contextPath}/user/uploadHead',
            data:datas,
            type : 'post',
            cache:false,//文件不设置缓存
            processData: false,//数据不被转换为字符串
            contentType: false,//上传文件时使用，避免 JQuery 对其操作
            dataType:"json",
            success:function (res) {
                alert(res.code) ;
            },
            error:function () {
            }
        });
    });
    //点击更新按钮触发表单提交
    $("#emp_update_btn").click(function () {
        alert('submit');
        $("#edit_form").submit() ;
    });
    //ztree
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var zNodes =[
        { name:"父节点1 - 展开", open:true,
            children: [
                { name:"父节点11 - 折叠",
                    children: [
                        { name:"叶子节点111"},
                        { name:"叶子节点112"},
                        { name:"叶子节点113"},
                        { name:"叶子节点114"}
                    ]},
                { name:"父节点12 - 折叠",
                    children: [
                        { name:"叶子节点121"},
                        { name:"叶子节点122"},
                        { name:"叶子节点123"},
                        { name:"叶子节点124"}
                    ]},
                { name:"父节点13 - 没有子节点", isParent:true}
            ]},
        { name:"父节点2 - 折叠",
            children: [
                { name:"父节点21 - 展开", open:true,
                    children: [
                        { name:"叶子节点211",checked:true},
                        { name:"叶子节点212"},
                        { name:"叶子节点213"},
                        { name:"叶子节点214"}
                    ]},
                { name:"父节点22 - 折叠",
                    children: [
                        { name:"叶子节点221"},
                        { name:"叶子节点222"},
                        { name:"叶子节点223"},
                        { name:"叶子节点224"}
                    ]},
                { name:"父节点23 - 折叠",
                    children: [
                        { name:"叶子节点231"},
                        { name:"叶子节点232"},
                        { name:"叶子节点233"},
                        { name:"叶子节点234"}
                    ]}
            ]},
        { name:"父节点3 - 没有子节点", isParent:true}

    ];
    var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    //获取选中的人员
    function checkNode() {
        nodes = zTreeObj.getCheckedNodes(true);
        var permTokens = new Array(); //创建list集合
        var j = 0;
        for(var i = 0; i < nodes.length; i++) {
            permTokens[j] = nodes[i].name;
            j++;
        }
        return permTokens;
    }
});

</script>

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>